<template>
	<view class="wh-full">
		<!-- 筛选区 -->
		<use-header  :placeholder="0" type="gray" :search-tip="searchTip" :search-auto="!0"></use-header>
		<!-- 筛选区 -->
		<view class="navbar w-full dflex bg-drak" >
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='is_new' }"
				@click="navbarClick('is_new')">
				<view class="iconfont iconfont1 icondaishouhuo- dflex-c" ></view>
				新品
			</view>
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='is_best'}"
				@click="navbarClick('is_best')">
				<view class="iconfont iconfont1 iconremen dflex-c" ></view>
				精品
			</view>
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='is_benefit'}"
				@click="navbarClick('is_benefit')">
				<view class="iconfont iconfont1 iconhuiyuan dflex-c"></view>
				优惠
			</view>
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='is_hot'}"
				@click="navbarClick('is_hot')">
				<view class="iconfont iconfont1 iconshoucang- dflex-c"></view>
				热卖
			</view>
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='sell_price'}"
				@click="navbarClick('sell_price')">
				<text>价格</text>
				<view class="">
					<view class="iconfont iconjiantou02 ft-dark dflex-c"
						:class="{active: orderType == 'descs' && filterKey=='sell_price'}"></view>
					<view class="iconfont iconjiantou ft-dark dflex-c"
						:class="{active: orderType == 'ascs' && filterKey=='sell_price'}"></view>
				</view>
			</view>
			<view class="nav-item dflex-c flex1 pos-r h-full" :class="{active: filterKey=='browse'}"
				@click="navbarClick('browse')">
				<text>销量</text>
				<view class="">
					<view class="iconfont iconjiantou02 ft-dark dflex-c"
						:class="{active: orderType == 'descs' && filterKey=='browse'}"></view>
					<view class="iconfont iconjiantou ft-dark dflex-c"
						:class="{active: orderType == 'ascs' && filterKey=='browse'}"></view>
				</view>
			</view>
		</view>
		<view class="category-area margin-lr-sm margin-top" >
			<scroll-view class="" scroll-x>
				<view class="dflex">
					<view class="margin-right-sm" v-for="(item, index) in categoryDatas" :key="index" @click="toCategory(item)">
						<view :class="{ 'active': categoryId == item.id }" class="item border-radius padding-top padding-bottom-sm padding-lr-sm bg-main dflex-c dflex-flow-c animated-all">
							<image class="border-radius-xs" mode="aspectFill" :lazy-load="true" :src="item.catePic"></image>
							<text class="margin-top-sm line-height-1 clamp tac">{{ item.cateName }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" e-type="search" tip="搜索数据为空" btn-tip="重新搜索" height="70vh" :auto="false"
			@goto="tosearch"></use-empty>
		<!-- 列表区 -->
		<view v-else>
			<!-- 商品列表区 -->
			<view class="goods-list margin-top-xs">
				<view class="list dflex-b dflex dflex-wrap-w w-full">
					<view class="item pos-r bg-main border-radius padding-top-xs padding-bottom-sm" v-for="(item, index) in goodsDatas"
						:key="index" @click="togoods(item)">
						<view class="image-wrapper">
							<image mode="aspectFit" lazy-load :src="item.pic"></image>
						</view>
						<text class="title clamp padding-sm">{{ item.title }}</text>
						<view class="padding-left-sm dflex-b">
							<text class="price">{{ item.sellPrice }}</text>
							<text class="ft-dark margin-right-sm fs-xs">已售 {{item.browse }}</text>
						</view>
						<view v-if="item.isNew === 1" class="use-tag pos-a pos-top bg-base">新品</view>
					</view>
				</view>
			</view>

			<!-- 上拉加载更多 -->
			<use-loadmore :type="loadmoreType"></use-loadmore>
		</view>

		<!-- 置顶 -->
		<use-totop ref="usetop"></use-totop>

	</view>
</template>

<script>
	import {goods_page,goods_redeem} from "../../js_sdk/apis/goods.js"
	import {category_list,category_tree} from "../../js_sdk/apis/category.js"
	export default {
		data() {
			return {
				searchTip: '请输入搜索关键字',
				empty: false,
				// 0综合排序 1销量优先 2价格排序
				filterKey: "",
				// 1价格从低到高 2价格从高到低
				orderType: "ascs",
				// 商品数据
				goodsDatas: [],
				// 加载更多状态
				loadmoreType: 'more',
				// 请求数据
				reqdata: {
					current: 1,
					size: 10,
					isIntegral:1,
					cateId: null
				},
				scrollTop: 0,
				categoryId: '',
				categoryDatas: [],
			};
		},
		watch: {
			// 显示空白页
			goodsDatas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData('refresh');
		},
		//加载更多
		onReachBottom() {
			this.loadData();
		},
		onLoad(options) {
			if(options.keyword){
				this.reqdata.title=options.keyword
			}
			if(options.categoryId){
				console.log(options.categoryId)
				//this.loadCategoryData(options.parentId);
				this.categoryId=options.categoryId
				this.reqdata.cateId=options.categoryId
			}
			category_list({current:1,size:100000}).then(res=>{
				this.categoryDatas=res.data.records.filter(v=>v.parentId>0)
			})
			this.loadData();
		},
		methods: {
			// 加载商品，下拉刷新|上拉加载
			async loadData(type = 'add', loading) {
				if (this.loadmoreType === 'loading') {
					// 防止重复加载
					return;
				}

				if (loading == 1 || type == 'refresh') {
					// 从首页开始加载
					this.reqdata.current = 1;
				}

				// 没有更多直接返回 
				if (type === 'add') {
					if (this.loadmoreType === 'nomore') {
						return;
					}
					// 加载中
					this.loadmoreType = 'loading';
				} else {
					// 更多
					this.loadmoreType = 'more'
				}
				goods_page(this.reqdata).then(res => {
					if (res.code === 200) {
						if (res.data.records && res.data.records.length > 0) {
							if (loading == 1 || type == 'refresh') {
								this.goodsDatas = [];
							}
							this.goodsDatas = [...this.goodsDatas, ...res.data.records];

							if (res.data.records.length >= this.reqdata.size) {
								this.reqdata.current++;
								this.loadmoreType = 'more'
							} else {
								this.loadmoreType = 'nomore'
							}
						} else {
							this.loadmoreType = 'nomore'
							if(type == 'refresh'){
								this.goodsDatas = [];
							}
						}
					}

					if (this.goodsDatas.length === 0) {
						this.empty = true;
					}

					if (loading == 1) {
						uni.hideLoading()
					} else if (type == 'refresh') {
						uni.stopPullDownRefresh();
					}
				})
			},
			// 点击筛选 
			navbarClick(key) {
				if (this.filterKey === key && key !== 'sell_price'&& key !== 'browse') {
					return;
				}
				console.log(key)
				if(key == 'sell_price'|| key == 'browse'){
					delete this.reqdata[this.orderType]
					this.orderType=="descs"?this.orderType="ascs":this.orderType="descs"
				}else{
					delete this.reqdata[this.orderType]
					this.orderType="descs"
				}
				this.filterKey = key;
				this.reqdata[this.orderType]=key
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})

				this.loadData('refresh', 1);
				uni.showLoading({
					title: '正在加载'
				})
			},
			loadCategoryData(cid) {
				this.categoryId = cid;
				this.$db['usemall-goods-category'].tolist({ size: 200 }).then(res => {
					if (res.code === 200) {
						let pid = '';
						let _categoryDatas = [];

						res.datas.forEach(item => {
							if (item._id == cid) {
								pid = item.pid;
							}
							
							if (item.pid) {
								_categoryDatas.push(item);
							}
						});
						
						this.categoryDatas = _categoryDatas.filter(x => x.pid == pid || !pid);
					}
				})
			},
			toCategory(item) {
				if(this.categoryId ==item.id){
					this.categoryId =""
					this.reqdata.cateId =null
				}else{
					this.categoryId = item.id;
					this.reqdata.cateId = item.id;
				}
				this.loadData('refresh');
			},
			// 搜索页
			tosearch() {
				if (this.$api.pages().length > 1) {
					uni.navigateBack();
					return;
				}
				this.$api.tosearch();
			},
			// 商品详情
			togoods(options) {
				uni.navigateTo({
					url:"goods-integral?id="+options.id
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.navbar {
		height: 100rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			color: $font-color-dark;
			font-size: 30rpx;

			&.active {
				font-size: 34rpx;
				font-weight: bold;
				
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
				}
			}
		}

		.iconfont1 {
			font-size: 17px;font-weight: bold;
			margin-right: 3px;
		}
		.iconfont {
			width: 30rpx;
			height: 14rpx;
			font-size: 20rpx;
			line-height: 1;
			margin-left: 4rpx;
		}
	}
	
	.category-area {
		
		.item {
			border-bottom: 4px solid #fff;
			width: 160rpx;
			height: 160rpx;
			
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
		.active {
			border-bottom: 4px solid #ff6a6c;
			font-weight: bold;
		}
	}

	.goods-list {
		.list {
			padding: 0 3vw 20rpx;
		}

		.item {
			width: 46vw;
			overflow: hidden;
			margin-top: 2vw;

			&:nth-child(2n) {
				margin-left: 1vw;
			}

			&:nth-child(2n + 1) {
				margin-right: 1vw;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 300rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
	}
</style>
